<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2023-09-06 14:49:30
 * @LastEditors: 甯左龙 1173405584@qq.com
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiSelectLayerNew\uiSelectLayerNew.vue
 * CIMC-V2
-->
<template>
  <div v-if="formId" class="uiSelectLayerNewRowDiv1">
    <!-- 隐藏组件 -->
    <el-form-item
      class="pr-1"
      :label="info.extension.label.value"
      :label-width="info.extension.labelWidth.value + 'px'"
      :prop="info.extension.model.value"
      style="display: none"
    >
      <el-input :ref="info._id + '_hidden'" v-model="formDataModel" v-ui-ref="vSetRef" class="hidden" disabled />
    </el-form-item>
    <!-- 显示组件 -->
    <el-form-item
      class="pr-1 item-self-input"
      :class="{ hidden: (info.extension.hidden && info.extension.hidden.value) || conditionProperty.hidden }"
      :label="info.extension.label.value"
      :label-width="info.extension.labelWidth.value + 'px'"
      :prop="info.extension.fieldKey.value || info._fieldKey"
      :rules="getRules"
    >
      <el-input
        :ref="info._id + '_show'"
        v-model="formDataLabel"
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        :placeholder="translateTitle('Ve.elements.请输入')"
        :readonly="info.extension.readonly && info.extension.readonly.value"
        :size="info.extension.size.value"
        :width="`${info.extension.width.value}px`"
        @keyup="keyupModel"
      >
        <template #append>
          <el-button @click="clickOpen">
            <img alt="" src="@/assets/wms_images/selectLayerNew_more.png" />
            <!-- <vui-icon class="block" icon="more-fill" style="font-weight: bold; font-size: 14px; vertical-align: middle" /> -->
          </el-button>
        </template>
        <template #suffix>
          <vui-icon
            v-if="formDataLabel && !(info.extension.disabled.value || conditionProperty.disabled)"
            icon="close-circle-line"
            style="font-size: 14px; cursor: pointer; display: flex; align-items: center"
            @click="clearFormDataModel"
          />
        </template>
      </el-input>
    </el-form-item>
  </div>
  <div v-else class="mt-[2px]" :class="{ hidden: (info.extension.hidden && info.extension.hidden.value) || conditionProperty.hidden }">
    <el-input :ref="info._id + '_hidden'" v-model="formDataModel" v-ui-ref="vSetRef" class="hidden" disabled />
    <el-input
      :ref="info._id + '_show'"
      v-model="formDataLabel"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :placeholder="translateTitle('Ve.elements.请输入')"
      :size="info.extension.size.value"
      :width="`${info.extension.width.value}px`"
      @keyup="keyupModel"
    >
      <template #append>
        <el-button @click="clickOpen">
          <vui-icon class="block" icon="more-fill" />
        </el-button>
      </template>
    </el-input>
  </div>
  <div v-if="hasPreview">
    <teleport to="body">
      <VuiModal v-if="dialogTableVisible" v-model="dialogTableVisible" @opened="opened">
        <template #title>{{ info.name }}</template>
        <div v-if="searchModel.length">
          <el-form ref="searchForm" label-width="100px" style="margin-bottom: 10px">
            <div class="rowdiv">
              <div class="rowdiv-left-box">
                <el-form-item
                  v-for="(item, index) in searchModel"
                  :key="index"
                  class="formItemClass"
                  :label="item.searchConfig.formItemtype === 'checkbox' ? '' : item.title"
                  :label-width="item.searchConfig.formItemtype === 'checkbox' ? '0px' : '90px'"
                  :prop="item.field"
                >
                  <div v-if="item.searchConfig.formItemtype === 'checkbox'" style="height: 13px; width: 100%"></div>
                  <el-checkbox
                    v-if="item.searchConfig.formItemtype === 'checkbox'"
                    :ref="'checkbox_' + info._id"
                    v-model="formData[item.field]"
                    :disabled="item.searchConfig.disabled"
                    :false-label="item.searchConfig.checkboxValue.false_label"
                    :true-label="item.searchConfig.checkboxValue.true_label"
                  >
                    {{ item.title }}
                  </el-checkbox>
                  <el-select
                    v-else-if="item.searchConfig.formItemtype === 'uiSelect'"
                    v-model="formData[item.field]"
                    clearable
                    :disabled="item.searchConfig.disabled"
                    filterable
                    :multiple="item.searchConfig.multiple"
                    size="mini"
                    @change="searchFormItemChange(item.field)"
                  >
                    <el-option
                      v-for="(option, i) in selectOptions[item.field]"
                      :key="`${i}_${item.searchConfig.componentId}`"
                      :label="option[item.searchConfig.labelField] || 'label'"
                      :value="option[item.searchConfig.valueField] || 'value'"
                    >
                      <span>{{ option[item.searchConfig.labelField] }}</span>
                    </el-option>
                  </el-select>
                  <div v-else-if="item.searchConfig.formItemtype === 'uiSwitch'">
                    <el-checkbox
                      v-if="item.searchConfig.modelStyle === 'rectangle'"
                      v-model="formData[item.field]"
                      :false-label="item.searchConfig.inactiveValue"
                      size="large"
                      :style="{ height: '26px' }"
                      :true-label="item.searchConfig.activeValue"
                    />
                    <el-switch
                      v-else
                      v-model="formData[item.field]"
                      :active-value="item.searchConfig.activeValue"
                      :inactive-value="item.searchConfig.inactiveValue"
                    />
                  </div>
                  <el-input
                    v-else
                    v-model.trim="formData[item.field]"
                    :disabled="item.searchConfig.disabled"
                    size="mini"
                    style="width: 200px"
                    @change="searchFormItemChange(item.field)"
                  />
                </el-form-item>
              </div>
              <div class="rowdiv-right-box">
                <div class="bottom-button" style="margin: 5px; margin-left: 0; display: inline-block; width: 200px; position: relative; top: 14px">
                  <el-button @click="resetForm()">{{ translateTitle('Ve.elements.重置') }}</el-button>
                  <el-button type="primary" @click="searchForm">{{ translateTitle('Ve.elements.查询') }}</el-button>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <UiTable
          ref="UiTable_Select"
          v-ui-ref="vSetRef"
          class="max-w-[80vw]"
          :form-data="formData"
          :form-data-model="formDataModel"
          :info="info"
          @outSelected="outSelected"
          @tableEnterEvent="tableEnterEvent"
        />
        <template #footer>
          <div
            v-if="hasCheckboxOrRadio != 'radio' || !(info.extension.hiddenBottomBtn && info.extension.hiddenBottomBtn.value)"
            class="flex justify-center p-3 border-t border-gray-100"
          >
            <el-button @click="dialogTableVisible = false">{{ translateTitle('Ve.elements.取消') }}</el-button>
            <el-button type="primary" @click="onconfirm">{{ translateTitle('Ve.elements.确定') }}</el-button>
          </div>
        </template>
      </VuiModal>
    </teleport>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import UiTable from '../../basic/uiTable/uiSelectNewTable.vue'
  import cloneDeep from 'lodash/cloneDeep'
  import isArray from 'lodash/isArray'
  import { processingConstant, replaseRegVariable } from '@ve/utils/utils'
  import COMPONENTS from '@ve/common/components'
  import { reArrayData } from '@ve/utils/extendData'
  import trim from 'lodash/trim'
  import merge from 'lodash/merge'
  import isEmpty from 'lodash/isEmpty'
  import { customAlphabet } from 'nanoid'
  import isString from 'lodash/isString'

  export default defineComponent({
    name: 'UiSelectLayerNew',
    components: { UiTable },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return { dialogTableVisible: false, checkRows: [], formData: {}, cacheFormData: {}, selectOptions: {}, searchModel: [] }
    },
    computed: {
      formDataLabel: {
        get() {
          let _model = cloneDeep(this.getFormData(false, this.getInfo.extension.fieldKey.value))
          _model = _model === undefined ? '' : _model
          return _model || this.formDataModel
        },
        set(value) {
          let _model = this.getFormData(true)
          _model[this.getInfo.extension.fieldKey.value] = value
        },
      },
      //是否是单选或者多选
      hasCheckboxOrRadio() {
        let _type = ''
        this.info.extension.tableColumns.value.forEach((v) => {
          if (v._type == 'checkbox') {
            _type = 'checkbox'
          }
          if (v._type == 'radio') {
            _type = 'radio'
          }
        })
        return _type
      },
      getRules() {
        const rules = this.getInfo.extension.rule.value
        if (this.getInfo.extension.rule.type === 'exSwitch') {
          // 老版校验 只校验了是否必填
          return rules ? [{ required: true, message: translateTitle('Ve.elements.请输入必填项'), trigger: 'change' }] : []
        } else {
          const ruleArr = [],
            triggerArr = ['blur', 'change'],
            outType = ['phone', 'card', 'RegExp', 'number']

          //必填
          if (rules.required) {
            let message = rules.message || translateTitle('Ve.utils.请输入必填信息')
            if (rules.pattern || rules.type) {
              message = translateTitle('Ve.utils.请输入必填信息')
            }
            ruleArr.push({
              required: rules.required || false,
              message: message,
              trigger: triggerArr,
            })
          }
          //为null的时候处理
          if (rules.type === 'null') {
            // rules[v.extension.model.value] = ruleArr
            return ruleArr
          }
          //处理type
          if (rules.type && outType.includes[rules.type]) {
            ruleArr.push({
              type: rules.type,
              message: rules.message,
              trigger: triggerArr,
            })
          }
          //处理正则
          if (rules.pattern) {
            ruleArr.push({
              pattern: rules.pattern,
              message: rules.message,
              trigger: triggerArr,
            })
          }
          return ruleArr
        }
      },
      // searchModel() {
      //   const $this = this
      //   return cloneDeep(
      //     $this.info.extension.tableColumns.value.filter((item) => {
      //       if (item.openSearch && item.searchConfig) {
      //         // 修改formData 赋值逻辑 如果当前formData有值则不重新赋值，防止数据源绑定的值被覆盖
      //         item.field &&
      //           ($this.formData[item.field] = $this.formData[item.field] || processingConstant($this, item.searchConfig.defaultItemValue || ''))
      //         if (item.openSearchEdit !== undefined) {
      //           item.searchConfig.disabled = item.openSearchEdit
      //         }
      //         // 载入下拉选择类型组件渲染
      //         if (item.formModuleType && item.formModuleType.type === 'uiTableSelect') {
      //           item.searchConfig.formItemtype = 'uiSelect'
      //           item.searchConfig.labelField = item.formModuleType.info.extension.labelField.value
      //           item.searchConfig.valueField = item.formModuleType.info.extension.valueField.value
      //           item.searchConfig.multiple = item.formModuleType.info.extension.multiple.value
      //           item.searchConfig.componentId = this.componentId(8)
      //           this.selectOptions[item.field] = item.formModuleType.info.extension.optionConfig.value
      //           // 存储接口所需信息
      //           item.requestInfo = {
      //             api: item.formModuleType.info.extension.api.value,
      //             method: item.formModuleType.info.extension.method.value,
      //             paramList: item.formModuleType.info.extension.requestData.value,
      //             getDataKey: item.formModuleType.info.extension.getDataKey.value,
      //             field: item.field,
      //           }
      //           // 请求选项
      //           // this.getSelectOption(item.requestInfo)
      //         }
      //       }
      //       return item.openSearch === true
      //     })
      //   )
      // },
    },
    created() {
      //初始化table高度
      this.getInfo.height = 400
      if (!this.getInfo.extension.fieldKey.value) {
        this.getInfo.extension.fieldKey.value = this.getInfo.extension.model.value
      }
      //赋默认值
      if (this.info.extension.defaultValue && this.info.extension.defaultValue.value) {
        this.formDataLabel = processingConstant(this, this.info.extension.defaultValue.value)
      }
      //补丁合并数据
      this.extendColumns()
      //不是预览不执行
      if (!this.hasPreview) return
      //合并table属性
      this.extendOptions()
    },
    mounted() {},
    methods: {
      translateTitle,
      componentId() {
        const nanoid = customAlphabet('abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMN', 6)
        return nanoid()
      },
      getSelectOption(requestInfo) {
        if (requestInfo.api) {
          // 组织参数
          const prams = {}
          requestInfo.paramList.forEach((paramItem) => {
            let itemVal = paramItem.value
            if (/#{.*?}/g.test(itemVal)) {
              itemVal = replaseRegVariable(itemVal, this.info.data.formData)
            }
            prams[paramItem.key] = processingConstant(this, itemVal)
          })
          // 调用接口
          request({
            url: GFCD('dams', 'domain') + requestInfo.api,
            method: 'post',
            data: {
              data: JSON.stringify(prams),
              method: requestInfo.method,
            },
          }).then((res) => {
            const getDataKey = requestInfo.getDataKey
            this.selectOptions[requestInfo.field] = isEmpty(getDataKey) ? res.data : res.data[getDataKey].data
          })
        }
      },
      searchFormItemChange(changeField) {
        this.searchModel.forEach((item) => {
          if (item.field === changeField || item.searchConfig.formItemtype !== 'uiSelect') return
          // 判断下拉组件的接口参数有没有当前的改变值
          let flag = false
          item.requestInfo.paramList.forEach((pItem) => {
            if (pItem.key === changeField) flag = true
          })
          if (flag) {
            // 先清空值再调用接口
            this.formData[item.field] = ''
            this.getSelectOption(item.requestInfo)
          }
        })
      },
      clickOpen() {
        if (this.info.extension.disabled.value) {
          return
        }
        // 请求下拉选项
        this.searchModel.forEach((item) => {
          if (item.searchConfig.formItemtype !== 'uiSelect') return
          this.getSelectOption(item.requestInfo)
        })
        this.dialogTableVisible = true
      },
      tableEnterEvent() {
        // 表格组件点击了回车
        // 先触发弹窗的确认事件
        this.onconfirm()
        // 再触发组件的回车事件
        this.$handleEnter()
      },
      // 回车聚焦到当前组件
      enterFocus() {
        // 如果当前组件为禁用状态 则直接跳转至下一个组件
        if (this.info.extension.disabled.value || this.conditionProperty.disabled) {
          this.$handleEnter()
        } else {
          // 当触发当前组件的聚焦时 直接触发三点图标的点击事件
          this.clickOpen()
        }
      },
      onconfirm() {
        //如果为空触发获取值
        // if (!this.checkRows.length) {
        this.$refs['UiTable_Select'].getCheckboxOrRadioVals()
        //单选框不往下执行了
        // if (this.$refs['UiTable_Select'].hasCheckboxOrRadio === 'radio') {
        //   return
        // }
        // }
        //确认操作
        const list = this.checkRows,
          key = (this.getInfo.extension.textValue && this.getInfo.extension.textValue.value) || this.getInfo.extension.fieldKey.value,
          value = this.getInfo.extension.fieldValue.value || this.getInfo.extension.model.value,
          labelTxt = [],
          valueTxt = []
        //拼装

        // 单选模式且未选中数据时不修改数据
        if (list.length === 1 && !list[0]) {
          this.dialogTableVisible = false
          return
        }

        for (let i = 0; i < list.length; i++) {
          if (list[i] && list[i][value] !== undefined) {
            labelTxt.push(list[i][key])
            valueTxt.push(list[i][value])
          }
        }
        //合并数据
        this.formDataLabel = labelTxt.join(',') || valueTxt.join(',')
        this.formDataModel = valueTxt.join(',')
        //如果为空重新复制
        this.formDataLabel = this.formDataLabel || this.formDataModel
        //ID为空都为空
        !this.formDataModel && (this.formDataLabel = '')
        this.dialogTableVisible = false
        //赋值新数据
        this.setNewFormdata(list)
        //调用change
        this.onChange()
        // 触发条件判断值改变
        this.setPageModulesState('value', this.formDataModel)
      },
      outSelected(data) {
        this.checkRows = data.rows
        if (data.isDbclick) {
          //值的键
          const valueKey = this.getInfo.extension.fieldValue.value || this.getInfo.extension.model.value
          const labelKey = (this.getInfo.extension.textValue && this.getInfo.extension.textValue.value) || this.getInfo.extension.fieldKey.value
          if (data.hasCheckboxOrRadio === 'radio') {
            // 单选模式
            this.formDataLabel = data.rows[0][labelKey] || data.rows[0][valueKey]
            this.formDataModel = data.rows[0][valueKey]
          } else if (data.hasCheckboxOrRadio === 'checkbox') {
            // 多选模式
            const labelTxt = [],
              valueTxt = []
            data.rows.forEach((i) => {
              if (i[valueKey] !== undefined) {
                labelTxt.push(i[labelKey])
                valueTxt.push(i[valueKey])
              }
            })
            this.formDataLabel = labelTxt.join(',') || valueTxt.join(',')
            this.formDataModel = valueTxt.join(',')
          }
          //如果为空重新复制
          this.formDataLabel = this.formDataLabel || this.formDataModel
          !this.formDataModel && (this.formDataLabel = '')
          this.dialogTableVisible = false
          //赋值新数据
          this.setNewFormdata(data.rows)
          //调用change
          this.onChange()
          // 触发条件判断值改变
          this.setPageModulesState('value', this.formDataModel)
        }
      },
      //选中函数
      selectRow() {
        //是否存在值
        if (!this.formDataModel) {
          this.checkRows = []
          this.$refs['UiTable_Select'].clearSelect()
          return
        }
        if (this.dialogTableVisible) {
          //优先已选中的为准
          // if ($this.checkRows.length) {
          //   $this.$refs['UiTable_Select'].setCheckboxRow($this.checkRows, true)
          //   return
          // }
          //没有以数据库的为准
          if (this.formDataModel) {
            const valueField = this.getInfo.extension.fieldValue.value || this.getInfo.extension.model.value,
              result = []
            const valueArr = this.formDataModel.split(',')
            for (let i = 0; i < valueArr.length; i++) {
              result.push({
                [valueField]: valueArr[i],
              })
            }
            this.$refs['UiTable_Select'].setCheckboxRow(result, true, 1)
          }
        }
      },
      opened() {
        const $this = this
        // 生成搜索表单
        this.searchModel = $this.info.extension.tableColumns.value.filter((item) => {
          if (item.openSearch && item.searchConfig) {
            // 修改formData 赋值逻辑 如果当前formData有值则不重新赋值，防止数据源绑定的值被覆盖
            item.field &&
              ($this.formData[item.field] = $this.formData[item.field] || processingConstant($this, item.searchConfig.defaultItemValue || ''))
            if (item.openSearchEdit !== undefined) {
              item.searchConfig.disabled = item.openSearchEdit
            }
            // 载入下拉选择类型组件渲染
            if (item.formModuleType && item.formModuleType.type === 'uiTableSelect') {
              item.searchConfig.formItemtype = 'uiSelect'
              item.searchConfig.labelField = item.formModuleType.info.extension.labelField.value
              item.searchConfig.valueField = item.formModuleType.info.extension.valueField.value
              item.searchConfig.multiple = item.formModuleType.info.extension.multiple.value
              item.searchConfig.componentId = this.componentId(8)
              this.selectOptions[item.field] = item.formModuleType.info.extension.optionConfig.value
              // 存储接口所需信息
              item.requestInfo = {
                api: item.formModuleType.info.extension.api.value,
                method: item.formModuleType.info.extension.method.value,
                paramList: item.formModuleType.info.extension.requestData.value,
                getDataKey: item.formModuleType.info.extension.getDataKey.value,
                field: item.field,
              }
              // 请求选项
              // this.getSelectOption(item.requestInfo)
            } else if (item.formModuleType && item.formModuleType.type === 'uiTableSwitch') {
              // 开关类型
              item.searchConfig.formItemtype = 'uiSwitch'
              item.searchConfig.modelStyle = item.formModuleType.info.extension.modelStyle.value
              item.searchConfig.activeValue = item.formModuleType.info.extension.activeValue.value
              item.searchConfig.inactiveValue = item.formModuleType.info.extension.inactiveValue.value
            }
          }
          return item.openSearch === true
        })
        //重置表单
        $this.resetForm(true)
        const data = this.formData
        const cloumns = this.getInfo.extension.tableColumns.value
        const requestData = this.getInfo.extension.requestData.value
        //单独处理不存在的情况设置为空
        requestData.forEach((item) => {
          if (/{[^#{]+}/g.test(item.value) && !data[item.key]) {
            $this.formData[item.key] = ''
            $this.getInfo.data.formData[item.key] = ''
          }
        })
        //处理已存在不是搜索的情况设置为空
        for (let key in data) {
          const findCloumns = cloumns.find((item) => {
            return !item.openSearch && item.field === key
          })
          if (findCloumns) {
            const findReqs = requestData.find((item) => {
              return /{[^#{]+}/g.test(item.value) && item.key === key
            })
            if (findReqs) {
              this.formData[findReqs.key] = ''
              this.getInfo.data.formData[findReqs.key] = ''
            }
          }
        }
        //进页面执行 数据不为空执行
        $this.$refs['UiTable_Select'].onRefresh(function () {
          //回调有个this参数课接收
          $this.selectRow()
        })
      },
      //查询数据
      searchForm() {
        // const data = this.formData
        // for (let key in data) {
        //   this.getInfo.data.formData[key] = isArray(data[key]) ? data[key].join() : data[key]
        // }
        const $this = this
        this.$refs['UiTable_Select'].onRefresh(function () {
          //回调有个this参数课接收
          $this.selectRow()
        })
      },
      //重置表单
      resetForm1(flag) {
        const data = this.formData
        const cloumns = this.getInfo.extension.tableColumns.value
        const requestData = this.getInfo.extension.requestData.value
        for (let key in data) {
          const find = cloumns.find((item) => {
            return item.field === key
          })
          if (!flag && find && find.searchConfig.disabled) {
            // 点击重置按钮时 如果配置了输入框禁用 则不清空
            data[key] = this.getInfo.data.formData[key] || data[key]
            continue
          }
          if (find && find.searchConfig.formItemtype === 'checkbox') {
            data[key] = find.searchConfig.checkboxValue.true_label
          } else {
            if (flag) {
              const findReq = requestData.find((item) => {
                return item.key === key
              })
              if (findReq) {
                let findReqVal = findReq.value
                if (/{[^#{]+}/g.test(findReqVal)) {
                  //获取索引
                  const index = findReqVal.indexOf('}')
                  //获取字段
                  const field = findReqVal.substring(2, index) + findReqVal.substring(index + 1)
                  findReqVal = this.getInfo.data.formData[field] || ''
                }
                data[key] = processingConstant(this, findReqVal)
                this.getInfo.data.formData[key] = processingConstant(this, findReqVal)
              }
              continue
            }
            data[key] = ''
            this.getInfo.data.formData[key] = ''
          }
        }
      },
      // 重写重置表单逻辑
      resetForm() {
        let _data = {}
        const cloumns = this.getInfo.extension.tableColumns.value // 配置的表格列
        const requestData = this.getInfo.extension.requestData.value // 自定义的参数
        const _formData = this.cacheFormData // 数据源绑定的数据
        // 先整合表格列配置
        cloumns.forEach((item) => {
          if (item.openSearch) {
            _data[item.field] = ''
            if (item.searchConfig.formItemtype === 'checkbox') {
              // 激活标记值
              _data[item.field] = item.searchConfig.checkboxValue.checked
                ? item.searchConfig.checkboxValue.true_label
                : item.searchConfig.checkboxValue.false_label
            } else if (item.formModuleType && item.formModuleType.type === 'uiTableSwitch') {
              // 设置默认值为关闭值
              _data[item.field] = item.searchConfig.inactiveValue
            }
          }
        })
        // 再整合数据源绑定的值(当选择了数据源绑定的当参数用)
        if (this.getInfo.dataSourceBind.hasParam.value) {
          merge(_data, _formData)
        }
        // 最后再整合自定义的参数
        requestData.forEach((item) => {
          let itemVal = item.value
          if (/#{.*?}/g.test(item.value)) {
            // 转换变量
            itemVal = replaseRegVariable(itemVal, _formData)
          }
          // 处理常量
          _data[item.key] = processingConstant(this, itemVal)
        })
        this.getInfo.data.formData = _data
        this.formData = _data
        // 重新调用搜索表单的下拉选择组件的接口
        this.searchModel.forEach((item) => {
          if (item.searchConfig.formItemtype !== 'uiSelect') return
          this.getSelectOption(item.requestInfo)
        })
      },
      //合并属性
      extendColumns() {
        //指定this
        const $this = this
        //提取基础组件
        const result = reArrayData([COMPONENTS.baseComs, COMPONENTS.wmsComs], [])
        //获取和当前相同的type的基础组件
        const findObj = result.find((item) => {
          return item.type === $this.getInfo.type
        })
        //组件选中状态
        let compColumnARR = []
        if (findObj) {
          //组件中的属性
          compColumnARR = findObj.extension.tableColumns.value || []
        }
        //当前配置的属性
        const tableColumnARR = $this.getInfo.extension.tableColumns.value || []
        //循环处理组件
        for (let i = 0; i < tableColumnARR.length; i++) {
          if (tableColumnARR[i]._type !== 'field') continue
          //查找相同的属性
          const compFind = compColumnARR.find((item) => {
            return item.field === tableColumnARR[i].field
          })
          //判断是否存在
          if (compFind && tableColumnARR[i].openSearch === undefined) {
            tableColumnARR[i].openSearch = compFind.openSearch
            tableColumnARR[i].searchConfig = compFind.searchConfig || {}
          } else {
            tableColumnARR[i].searchConfig = tableColumnARR[i].searchConfig || {}
          }
        }
      },
      extendOptions() {
        const components = reArrayData([COMPONENTS.baseComs, COMPONENTS.wmsComs], [])
        const find =
          components.find((item) => {
            return item.type === 'uiTable'
          }) || {}
        const extension = find.extension || {}
        //循环数据 合并数据
        for (let key in extension) {
          this.getInfo.extension[key] = this.getInfo.extension[key] || extension[key]
        }
      },
      //keyup事件
      keyupModel() {
        if (this.getInfo.extension.fieldKey.value !== this.getInfo.extension.model.value) {
          this.formDataModel = this.formDataLabel
        }
      },
      //赋值新的formdata
      setNewFormdata(data = []) {
        if (!this.getInfo.extension.getOutKey && (!this.getInfo.extension.tableColumns || !this.getInfo.extension.tableColumns.value.length)) return
        //获取表格的配置
        const tableConfig = this.getInfo.extension.tableColumns.value
        const formFIeldArr = tableConfig.filter((item) => {
          return item.formfield
        })
        //获取key设置
        const outkey = this.getInfo.extension.getOutKey.value
        //如果存在配置
        if (outkey) {
          const outKeyArr = outkey.split(',')
          for (let i = 0; i < outKeyArr.length; i++) {
            // 遍历生成带出值
            const outData = []
            data.forEach((ii) => {
              outData.push(ii[trim(outKeyArr[i])])
            })
            if (!outData.length) continue
            if (isString(outData[0])) {
              this.vuiComponents[this.formId].self.getInfo.data.formData[trim(outKeyArr[i])] = outData.join()
            } else {
              this.vuiComponents[this.formId].self.getInfo.data.formData[trim(outKeyArr[i])] = outData[0]
            }
          }
        }

        //优先以表格配置为准
        if (formFIeldArr.length) {
          for (let i = 0; i < formFIeldArr.length; i++) {
            // 遍历生成带出值
            const outData = []
            data.forEach((ii) => {
              outData.push(ii[trim(formFIeldArr[i].field)])
            })
            if (!outData.length) continue
            if (isString(outData[0])) {
              this.vuiComponents[this.formId].self.getInfo.data.formData[formFIeldArr[i].formfield] = outData.join()
            } else {
              this.vuiComponents[this.formId].self.getInfo.data.formData[formFIeldArr[i].formfield] = outData[0]
            }
            // this.vuiComponents[this.formId].self.getInfo.data.formData[formFIeldArr[i].formfield] = outData.join()
          }
        }
      },
      dataSourceChange(newval) {
        let _mergeData = {}
        // 根据 getDataKey 筛选需要的数据
        if (!trim(this.dataSource.getDataKey)) {
          // 如果没有 getDataKey 则返回全量数据
          _mergeData = newval
        } else {
          const keyList = this.info.dataSourceBind.getDataKey?.value.split(',')
          isArray(keyList) &&
            keyList.forEach((item) => {
              item = trim(item)
              if (newval[item] !== undefined) {
                // 如果传过来的对象里面没有要取得值 则丢弃
                _mergeData[item] = newval[item]
              }
            })
        }
        this.cacheFormData = {
          ...this.cacheFormData,
          ..._mergeData,
        }
      },
      clearFormDataModel() {
        this.formDataLabel = ''
        this.formDataModel = ''
        // 触发值改变
        this.onChange()
      },
    },
  })
</script>
<style lang="scss" scoped>
  .ui-select-layer {
    height: 26px;
    box-sizing: border-box;
  }
  .select-bar {
    line-height: 26px;
    border-radius: 2px;
  }
  .bottom-button .el-form-item__content {
    margin-left: 0 !important;
  }
  .is-disabled {
    background-color: var(--el-disabled-bg-color);
    border-color: var(--el-disabled-border-color);
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
  }

  .rowdiv .formItemClass {
    width: 200px;
    display: inline-block;
    margin-right: 5px;
  }

  .rowdiv {
    max-width: 800px;
    overflow: hidden;
  }
  .rowdiv div {
    float: left;
  }
  .rowdiv .rowdiv-left-box {
    max-width: 620px;
  }
  .rowdiv .rowdiv-right-box {
    width: 100px;
  }
  :deep(.item-self-input .el-input-group__append) {
    padding-left: 15px;
    padding-right: 10px;
    background: transparent;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 42px;
    .el-button {
      width: 56px;
      padding: 0 17px;
    }
  }

  :deep(.item-self-input) {
    .el-input__inner {
      border-radius: 4px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none;
      padding-right: 20px;
    }
    .el-input {
      .el-input__suffix {
        display: none;
        transform: translateX(-42px) !important;
      }
      &:hover {
        .el-input__suffix {
          display: flex;
        }
      }
    }
    .el-input__inner:focus + .el-input-group__append {
      border-color: var(--el-input-focus-border, var(--el-color-primary));
    }
  }
</style>
